<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	var url = "";
	function newObject() {
		$("#dlg").dialog("open").dialog("setTitle", "Open dialog add new");
		$("#fm").form("clear");
		url = "NhomMonHocServlet?flag=add";
	}

	function editObject() {
		var row = $("#tt").datagrid("getSelected");
		if (row) {
			$("#dlg").dialog("open").dialog("setTitle", "Open dialog edit");
			$("#fm").form("load", row);
			url = "NhomMonHocServlet?flag=edit";
		} else {
			alert("Bạn chưa chọn dữ liệu cần cập nhật！");
		}
	}

	function searchObject() {
		$('#tt').datagrid('load', {
			searchTen : $('#searchTen').val(),
		});
	}

	function removeObject() {
		//var row = $("#tt").datagrid("getSelected");
		
		var ids = [];
		var rows = $('#tt').datagrid('getSelections');
		for(var i=0; i<rows.length; i++){
			ids.push(rows[i].id_nhom_mon_hoc);
		}
		if (rows!=""){
			$.messager.confirm("Confirm", "Bạn muốn xóa mẩu tin này?",
					function(r) {
						if (r) {
							$.post("NhomMonHocServlet?flag=remove", {
								//id : row.id_nhom_mon_hoc
								id : ids.join(',')
							}, function(result) {
								if (result.success) {
									$("#tt").datagrid("reload"); // reload the user data
									$.messager.show({
										title : "Delete",
										msg : result.msg
									});
								} else {
									$.messager.show({
										title : "Error !",
										msg : result.msg
									});
								}
							}, "json");
						}
					});
		} else {
			alert("Bạn chưa chọn dữ liệu cần xóa！");
		}
	}

	function saveObject() {
		$("#fm").form("submit", {
			url : url,
			onSubmit : function() {
				return $(this).form("validate");
			},
			success : function(result) {
				var r = eval("(" + result + ")");
				if (r.success) {
					$("#dlg").dialog("close"); // close the dialog
					$("#tt").datagrid("reload"); // reload the user data
					$.messager.show({
						title : "Update",
						msg : r.msg
					});
				} else {
					$.messager.show({
						title : "Error !",
						msg : r.msg
					});
				}
			}
		});
	}
	
	jQuery(function() {
		$("#searchTen").autocomplete("search/searchNhomMonHoc.jsp");
	});
</script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 5 0px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 7px;
}

.fitem label {
	display: inline-block;
	width: 180px;
}

.fitem input {
	display: inline-block;
	width: 290px;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #888888;
	border-radius: 5px 5px 5px 5px;
	color: #222222;
	margin: 0 5px 0 0;
	padding: 3px 3px;
}
</style>
</head>
<body>
	<table id="tt" class="easyui-datagrid"
		style="width: 795px; height: 574px" url="NhomMonHocServlet"
		title=":: NHÓM MÔN HỌC" toolbar="#tb" rownumbers="true" pagination="true"
		singleSelect="false" fitColumns="true">
		<thead>
			<tr>
				<th field="ck" checkbox="true"></th>
				<th field="ten">Tên Nhóm Môn Học</th>
				<th field="ten_loai_nhom_mon_hoc">Tên Loại Nhóm Môn Học</th>
				<th field="ten_khoi_kien_thuc">Khối Kiến Thức</th>
				<th field="so_tc">Số TC</th>
				<th field="ghi_chu">Ghi Chú</th>
			</tr>
		</thead>
	</table>

	<div id="tb" style="padding: 5px">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newObject()">Thêm</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editObject()">Sửa</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeObject()">Xóa</a>
		</div>
		<div style="padding: 5px">
			<input class="search" id="searchTen" name="searchTen" type="text" placeholder="nhập tên nhóm môn học cần tìm"> 
				<a href="#" class="easyui-linkbutton" iconCls="icon-searchs" plain="true" onclick="searchObject()">Tìm Kiếm</a>
		</div>
	</div>

	<div id="dlg" class="easyui-dialog"
		style="width: 550px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">NHÓM MÔN HỌC</div>
		<form id="fm" method="post">
			<div class="fitem">
				<input type="hidden" name="id_nhom_mon_hoc"
					class="easyui-validatebox">
			</div>

			<div class="fitem">
				<label>Tên Nhóm Môn Học:</label> <input type="text"
					name="ten" class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Loại Nhóm Môn Học:</label> 
				<input name="id_loai_nhom_mon_hoc" class="easyui-combobox" required="true"
					style="width: 300px; height: 25px"
					url="view/loadLoaiNhomMonHoc.jsp" valueField="id" textField="ten"
					panelHeight="250" value="ten_loai_nhom_mon_hoc">
			</div>

			<div class="fitem">
				<label>Khối Kiến Thức:</label> 
				<input type="text" name="id_khoi_kien_thuc" class="easyui-combobox" required="true"
				style="width: 300px; height: 25px"
					url="view/loadKhoiKienThuc.jsp" valueField="id" textField="ten"
					panelHeight="250" value="ten_khoi_kien_thuc">
					
			</div>

			<div class="fitem">
				<label>Số Tín Chỉ:</label> 
				<input type="text" name="so_tc" class="easyui-numberbox" required="true" data-options="min:1" placeholder="nhập số >= 1">
			</div>

			<div class="fitem">
				<label>Ghi Chú:</label> <input type="text" name="ghi_chu"
					class="easyui-validatebox">
			</div>
		</form>
	</div>

	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveObject()">Lưu</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Hủy
			Bỏ</a>
	</div>
</body>
</html>